<template>
  <div class="task-table">
    <el-table v-loading="sessionLoading" :data="sessionList" tooltip-effect="dark"
      row-key="row_key_id" :border="true" :header-cell-class-name="headerCellClassName"
      :cell-class-name="cellClassName" @selection-change="handleSelectionSession">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column v-for="(value, index) in columns" :label="value.name" :prop="value.propName" :key="index"
        :width="value.width">
      </el-table-column>
        <el-table-column
        label="等待中/测试中/已完成">
        <template slot-scope="scope">
          <div >
            {{scope.row.pend_task_num}} / {{scope.row.run_task_num}} / {{scope.row.finish_task_num}}
          </div>
        </template>
      </el-table-column>
        <el-table-column
        label="有效Task总数">
        <template slot-scope="scope">
          <div >
            {{Number(scope.row.pend_task_num + scope.row.run_task_num + scope.row.finish_task_num)}}
          </div>
        </template>
      </el-table-column>
      
      <el-table-column label="操作" >
        <template slot-scope="scope">
          <router-link target="_blank" :to="{ name: 'TaskDetail', params: { sessionId: scope.row.session_id,isFinish: isFinish }}">
            <span class="operation-link">详情</span>
          </router-link>
          <span class="divide-line"> | </span>
          <span :class="[{'disabled-link': !isFinish || scope.row.run_mode === 'amap' || scope.row.run_mode === 'amap_traffic'}, 'operation-link']">
            <span :class="{'disabled-point': !isFinish || scope.row.run_mode === 'amap' || scope.row.run_mode === 'amap_traffic'}" @click="jumpToTaskReport(scope.row.session_id)">度量结果</span>
          </span>

        </template>
      </el-table-column>
    </el-table>
    <!--分页--工具条-->
    <el-pagination background layout="total,sizes, prev, pager, next" :page-sizes="[20, 50, 100]" :page-size="20"
      :current-page.sync="pageIndex" :total="total" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" />
  </div>
</template>
<script>
import { v4 as uuid } from "uuid"
import { fetchSessionList } from '@/api/task'
import { categoryMap, taskStatus } from '@/business/const'
import { columns } from "./TaskColumns"
import { mapGetters, mapState } from "vuex"
export default {
  name: 'TaskTable',
  data() {
    return {
      sessionList: [],
      total: 0,
      pageIndex: 1,
      pageSize: 20,
      sessionLoading: false,
      columns: columns,
      selectedSessionArrs: []
    }
  },
  props: {
    projName: String,
    projId: String
  },
  computed: {
    ...mapGetters(['taskRunFresh', 'taskFilters']),
    ...mapState({
        isFinish: state => state.task.isFinish,
      })
  },
  watch: {
    // 刷新或者删除后重新获取list的标识字段，200ms后置回false 
    taskRunFresh(newVal) {
      if (newVal) {
        this.getList()
        setTimeout(() => {
          this.$store.dispatch('task/setTaskRunFresh', false)
        }, 200)
      }
    },
    // 切换测试中、已完成时获取列表
    isFinish(newVal) {
      this.getList()
    },
    // 有搜索参数更新时 获取列表
    taskFilters: {
      handler(newVal) {
        this.getList()
      },
      deep: true
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    cellClassName() {
      return 'body-cell-custom'
    },
    headerCellClassName() {
      return 'header-cell-custom'
    },
    FormatStatus(status) {
      return taskStatus[status]
    },
    FormatCategory(category_id) {
      const res = categoryMap.filter((item) => item.value === category_id)
      return res[0].text
    },
    // 获取案例列表
    getList(pageParams) {
      const params = pageParams || {
        page_num: this.pageIndex,
        page_size: this.pageSize,
        finish: this.isFinish,
        session_name: this.taskFilters.session_name,
        session_id: this.taskFilters.session_id
      }
      this.sessionLoading = true
      fetchSessionList(params).then((res) => {
        if (res && res.data) {
          this.total = res.total
          this.sessionList = res.data.map(res => {
            let temp = res
            temp.row_key_id = uuid()
            temp.children = [];
            temp.hasChildren = true;
            return temp
          });
        }
        this.sessionLoading = false
      }).catch(err => {
        this.$message.error(err)
      })
    },
    // 切换pagesize
    handleSizeChange(val) {
      this.pageSize = val;
      const pageParams = {
        page_num: this.pageIndex,
        page_size: this.pageSize,
        finish: this.isFinish // 查询已完成/测试中的列表
      }
      this.getList(pageParams)
    },
    // 切换页码
    handleCurrentChange(val) {
      this.pageIndex = val
      const pageParams = {
        page_num: this.pageIndex,
        page_size: this.pageSize,
        finish: this.isFinish // 查询已完成/测试中的列表
      }
      this.getList(pageParams)
    },
    // 选择session
    handleSelectionSession(val) {
      this.selectedSessionArrs = val.map(item => {
        return item.session_id
      })
      this.$store.dispatch('task/setSelectedIds', this.selectedSessionArrs)
    },
    jumpToTaskReport(session_id){
      let routeUrl = this.$router.resolve({
        name: 'TaskReport',
        params: { sessionId: session_id}
      });
      window.open(routeUrl.href, '_blank');
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/vars.scss'; // 定义变量

.task-table {
  margin-top: 10px;

  >.el-table {
    overflow: auto;
  }

  ::v-deep .el-table th.el-table__cell {
    background-color: rgb(248, 249, 250) !important;
  }
}

.change-icon {
  font-size: 20px;
  cursor: pointer;
}

.run-status {
  i {
    font-size: 20px;
    vertical-align: bottom;
  }

}

.operation-link {
  color: $primary-color;
  cursor: pointer;
}
.disabled-link {
  color: $primary-color;
  cursor: not-allowed !important;
  opacity: 0.5 ;
}
.disabled-point{
  pointer-events: none !important;
}

.divide-line {
  padding: 0 7px;
  opacity: 0.4;
}
</style>